.PopupScreen {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: auto;
  background-color: rgba(0, 0, 0, .5);
  display: block;
  transform: all 0.3s;

  &.floatClose {
    background-color: transparent;
    display: none;
  }

  .popupCard {
    @width: var(--popup-width);
    width: @width;
    margin: 6vh auto;
    background-color: white;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    .flex-column-center();
    .bounce-enter-active();

    &.close {
      .bounce-leave-active();
    }

    .header {
      width: 100%;
      box-sizing: border-box;
      padding: 20px 20px 10px;
      .flex-row-spacebetween;

      span {
        font-size: 18px;
        color: @label-color;
      }

      .closeIcon {
        font-size: 16px;
        .clickable();
      }
    }

    .container {
      width: 100%;
    }

    .footer {
      width: 100%;
      box-sizing: border-box;
      padding: 10px 20px 20px;
      .flex-row-end();
      * + * {
        margin-left: 10px;
      }
    }
  }
}

.bounce-enter-active {
  animation: bounce-in 0.3s;
}

.bounce-leave-active {
  animation: bounce-out 0.3s;
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-30px);
  }
}